<template>
	<view class="fox" style="width: 100%;height: 60px;font-weight: bolder;background-color: #ffffff;">
	<view class="input-item">
		<text class="tit"></text>
		<picker mode="date" v-model="date" @change="bindDateChange">
			<view class="date" style="background: none;height: 50%;font-weight: 600;">{{
				date || 'MM月拜访情况'
			}}{{"\xa0"}}{{"\xa0"}}<text class="iconfont iconxia"></text>
			</view>
		</picker>
		
		
	</view>
	
  <uni-table border stripe emptyText="暂无更多数据" >
      <!-- 表头行 -->
      <uni-tr>
          <uni-th align="center1">本月</uni-th>
          <uni-th align="center2">实际</uni-th>
          <uni-th align="left">计划</uni-th>
		  <uni-th align="left">平均</uni-th>
		
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr>
		 
          <uni-td style="margin-right: 10%;">第一周<text style="display: table-cell;font-size: 5px;color: #c0c0c0;">8月1日-8月7日</text></uni-td>
          <uni-td>20</uni-td>
          <uni-td>30</uni-td>
		  <uni-td>6</uni-td>
      </uni-tr>
     <uni-tr>
         <uni-td>第二周<text style="display: table-cell;font-size: 5px;color: #c0c0c0;">8月1日-8月7日</text></uni-td>
         <uni-td>20</uni-td>
         <uni-td>30</uni-td>
     		  <uni-td>6</uni-td>
     </uni-tr>
     <uni-tr>
         <uni-td>第三周<text style="display: table-cell;font-size: 5px;color: #c0c0c0;">8月1日-8月7日</text></uni-td>
         <uni-td>20</uni-td>
         <uni-td>30</uni-td>
     		  <uni-td>6</uni-td>
     </uni-tr>
      <uni-tr>
          <uni-td>第四周<text style="display: table-cell;font-size: 5px;color: #c0c0c0;">8月1日-8月7日</text></uni-td>
          <uni-td>20</uni-td>
          <uni-td>30</uni-td>
      		  <uni-td>6</uni-td>
      </uni-tr>
	  <uni-tr>
	      <uni-td>第五周<text style="display: table-cell;font-size: 5px;color: #c0c0c0;">8月1日-8月7日</text></uni-td>
	      <uni-td>20</uni-td>
	      <uni-td>30</uni-td>
	  		  <uni-td>6</uni-td>
	  </uni-tr>
	
	  <uni-tr>
	      <uni-td style="font-weight: 550;">本月总计</uni-td>
	      <uni-td>100</uni-td>
	      <uni-td>150</uni-td>
	  		  <uni-td>30</uni-td>
	  </uni-tr>
  </uni-table>
  
  
</view>
</template>

<script>
import moment from '@/common/moment';
export default {
  data() {
    return {
		date: moment().format('MM月拜访情况'),
    };
  },
  methods: {
	  bindDateChange(e) {
	  	this.date = e.target.value;
	  },
  },
  

onShow() {
			
		},
};
</script>

<style lang="less" >
	#center1,#center2,#left{
				  
	}
	
#app {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  
  
 
  .box {
    width: 100%;
    height: 40px;
    display: flex;
    border-left: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
	
    .content1 {
      width: 40%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #fafafa;
      border-right: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9;
      color: #333;
      font-size: 14px;
    }
    .content2 {
      width: 60%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #fff;
      border-right: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9;
      color: #b0b0b2;
      font-size: 14px;
    }
  }
  .content3 {
    width: 40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fafafa;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    color: #333;
    font-size: 14px;
  }
  .content4 {
    width: 40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fafafa;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    color: #333;
    font-size: 14px;
  }
}
.date{
		height: 100px;
					width:200px;
					background-color: #dea46b;
					text-align: center; 
					line-height: 50px;/*文字水平居中*/
					margin:auto;/*div水平居中*/
	}
</style>